<template>
	<uv-button :text="props.title" :loading="props.loading"
		:custom-style="{'border-radius':radiusComp,'height':'100%' ,'background-color':props.backgroundColor,'color':props.color,...customStyleComp}"
		@click="onClick()"></uv-button>
</template>

<script setup lang="ts">
	import { computed } from 'vue';

	const emits = defineEmits(['onClick']);

	const props = withDefaults(defineProps<{
		title : string;
		radius ?: number;
		backgroundColor ?: string;
		color ?: string;
		loading : boolean;
		customStyle ?: { [key : string] : any }
	}>(), {
		title: '保存',
		radius: 44,
		backgroundColor: '#D33123',
		color: '#FFFFFF',
		loading: false,
	})

	const radiusComp = computed(() => `${props.radius}px`);
	const customStyleComp = computed(() => {
		return props.customStyle || { 'height': '88rpx' };
	});
	const onClick = () => {
		emits('onClick');
	}
</script>

<style lang="scss" scoped>
	// .base-btn {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	height: 88rpx;
	// 	font-size: 32rpx;
	// }
</style>